<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/resources/css/common.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/resources/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/resources/fonts/iconfont.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/resources/js/jquery.min.1.8.2.js}" type="text/javascript"></script>
    <script th:src="@{/resources/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/resources/js/common_js.js}" type="text/javascript"></script>
    <script th:src="@{/resources/js/footer.js}" type="text/javascript"></script>
    <script th:src="@{/resources/js/jquery.jumpto.js}" type="text/javascript"></script>
    <title>商城首页</title>
</head>

<script type="text/javascript" charset="UTF-8">
    <!--
    //点击效果start
    function infonav_more_down(index) {
        var inHeight = ($("div[class='p_f_name infonav_hidden']").eq(aa).find('p').length) * 30;//先设置了P的高度，然后计算所有P的高度
        if (inHeight > 60) {
            $("div[class='p_f_name infonav_hidden']").eq(aa).animate({height: inHeight});
            $(".infonav_more").eq(aa).replaceWith('<p class="infonav_more"><a class="more"  onclick="infonav_more_up(' + aa + ');return false;" href="javascript:">收起<em class="pulldown"></em></a></p>');
        } else {
            return false;
        }
    }

    function infonav_more_up(index) {
        var infonav_height = 85;
        $("div[class='p_f_name infonav_hidden']").eq(aa).animate({height: infonav_height});
        $(".infonav_more").eq(aa).replaceWith('<p class="infonav_more"> <a class="more" onclick="infonav_more_down(' + aa + ');return false;" href="javascript:">更多<em class="pullup"></em></a></p>');
    }

    function onclick(event) {
        info_more_down();
        return false;
    }

    //点击效果end
    //-->
</script>
<body>
<div id="header_top">
    <div id="top">
        <div class="Inside_pages">
            <div class="Collection">下午好，欢迎光临onlineshop！<em></em></div>
            <div class="hd_top_manu clearfix">
                <ul class="clearfix">
                    <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover">欢迎光临本店！<a th:href="@{/toLogin}"
                                                                                          class="red">[换账号]</a>
                        新用户<a th:href="@{/toRegister}" class="red" >[免费注册]</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">我的订单</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/shopcart/toshop_cart}">购物车(<b>0</b>)</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/personal/toPersonCenter/}">个人中心</a></li>
                    <li class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a th:href="@{/personal/toHelper/}" class="hd_menu">客户服务</a>
                        <div class="hd_menu_list">
                            <ul>
                                <li><a th:href="@{/personal/toHelper/}">常见问题</a></li>
                                <li><a th:href="@{/personal/toHelper/}">在线退换货</a></li>
                                <li><a th:href="@{/personal/toHelper/}">在线投诉</a></li>
                                <li><a th:href="@{/personal/toHelper/}">配送范围</a></li>
                            </ul>
                        </div>
                    </li>
                   <!-- <li class="hd_menu_tit phone_c" data-addclass="hd_menu_hover"><a href="#" class="hd_menu "><em
                            class="iconfont icon-phone"></em>手机版</a>
                        <div class="hd_menu_list erweima">
                            <ul>
                                <img th:src="@{/resources/images/erweima.png}" width="100px" height="100"/>
                            </ul>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <!--样式-->
    <!--顶部样式2-->
    <div id="header " class="header page_style">
        <div class="logo"><a href="#"><img th:src="@{/resources/images/logo.png}"/></a></div>
        <!--可修改图层-->
        <div class="festival"><a href="#"><img th:src="@{/resources/images/logo_yd.png}"/></a></div>
        <!--结束图层-->
        <div class="Search">
            <p><input name="" type="text" class="text"/><input name="" type="submit" value="搜 索" class="Search_btn"/>
            </p>
        </div>
        <!--可修改图层2-->
        <!--<div class="festival1"><a href="#"><img th:src="@{/resources/images/logo_sd.png}" /></a></div>--><!--结束-->
        <!--购物车样式-->
        <div class="hd_Shopping_list" id="Shopping_list">
            <div class="s_cart"><em></em><a th:href="@{/shopcart/toshop_cart}">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count"
                                                                                              id="shopping-amount">0</i>
            </div>
            <div class="dorpdown-layer">
                <div class="spacer"></div>
                <!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>-->
                <ul class="p_s_list">
                    <li>
                        <div class="img"><img th:src="@{/resources/images/tianma.png}"></div>
                        <div class="content"><p><a href="#">产品名称</a></p>
                            <p>颜色分类:紫花8255尺码:XL</p></div>
                        <div class="Operations">
                            <p class="Price">￥55.00</p>
                            <p><a href="#">删除</a></p></div>
                    </li>
                </ul>
                <div class="Shopping_style">
                    <div class="p-total">共<b>1</b>件商品　共计<strong>￥ 515.00</strong></div>
                    <a th:href="@{/shopcart/toshop_cart}" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
                </div>
            </div>
        </div>
    </div>
    <!--菜单导航样式-->
    <div id="Menu" class="clearfix">
        <div class="Inside_pages">
            <!--菜单栏-->
            <div class="Navigation" id="Navigation">
                <ul class="Navigation_name">
                    <li><a th:href="@{/product/product_list(id=1)}">图书</a></li>
                    <li><a th:href="@{/product/product_list(id=2)}">手机</a></li>
                    <li><a th:href="@{/product/product_list(id=4)}">数码</a></li>
                    <li><a th:href="@{/product/product_list(id=3)}">家用电器</a></li>
                    <li><a th:href="@{/product/product_list(id=8)}">个人化妆</a></li>
                    <li><a th:href="@{/product/product_list(id=6)}">电脑办公</a></li>
                    <li><a th:href="@{/product/product_list(id=14)}">食品饮品</a></li>
                    <li><a th:href="@{/product/product_list(id=9)}">服饰内衣</a></li>
                    <li><a th:href="@{/product/product_list(id=17)}">运动健康</a></li>
                </ul>
            </div>
            <script>$("#Navigation").slide({titCell: ".Navigation_name li"});</script>
        </div>
    </div>
</div>
<div class="Slide_style">
    <!--幻灯片样式1-->
    <div class="Menu_style clearfix" id="Slide">

    </div>
    <!--幻灯片样式-->
    <div id="slideBox" class="slideBox">
        <div class="hd">
            <ul class="smallUl"></ul>
        </div>
        <div class="bd">
            <ul>
                <li><a  target="_blank">
                    <!--<div th:style="'background:url('+ @{'/resources/images/AD_02.jpg}'+ ');' no-repeat; background-position:center; width:100%; height:645px; background-size:100% 100%"></div>-->
                    <div th:style="'background:url(' + @{/resources/images/ADimg_14.jpg} + ')' +'no-repeat; background-position:center; width:100%; height:645px; background-size:100% 100%'"></div>

                </a></li>
                <li><a  target="_blank">
                    <div th:style="'background:url(' + @{/resources/images/AD_02.jpg} + ')' +'no-repeat; background-position:center; width:100%; height:645px; background-size:100% 100%'"></div>
                </a></li>
                <li><a  target="_blank">
                    <div th:style="'background:url(' + @{/resources/images/AD_03.jpg} + ')' +'no-repeat; background-position:center; width:100%; height:645px; background-size:100% 100%'"></div>
                </a></li>
            </ul>
        </div>
        <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
        <a class="prev" href="javascript:void(0)"><em class="left_arrow"></em></a>
        <a class="next" href="javascript:void(0)"><em class="right_arrow"></em></a>

    </div>
    <script type="text/javascript">
        jQuery(".slideBox").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            autoPlay: true,
            autoPage: true,
            delayTime: 500,
            interTime: 5000
        });
    </script>
</div>
<div class="index_style clearfix" id="service_list">
    <div class="service_style">
        <ul class="service_list">
            <li class="xianduan"><a><em class="iconfont icon-plane"></em>
                <h2>机票</h2></a></li>
            <li><a><em class="iconfont icon-train"></em>
                <h2>火车票</h2></a></li>
            <li><a><em class="iconfont icon-friendfill"></em>
                <h2>便民服务</h2></a></li>
            <li><a><em class="iconfont icon-jianzhutubiao"></em>
                <h2>同城</h2></a></li>
            <li><a><em class="iconfont icon-jiudian"></em>
                <h2>酒店</h2></a></li>
            <li><a><em class="iconfont icon-chongzhi"></em>
                <h2>充值</h2></a></li>
            <li><a><em class="iconfont icon-car"></em>
                <h2>交通违章</h2></a></li>
            <li><a><em class="iconfont icon-xiangzi"></em>
                <h2>成人用品</h2></a></li>
        </ul>
    </div>
</div>

<div class="index_style clearfix">
    <!--推荐图层样式-->
    <div class="recommend">
        <div class="recommend_bg"></div>
        <div class="list">
            <div class="picScroll">
                <div class="hd">
                    <a class="prev" href="javascript:void(0)">&gt;</a>
                    <a class="next" href="javascript:void(0)">&lt;</a>
                </div>
                <div class="bd">
                    <ul>
                        <li class="recommend_info" th:each="pro8:${product8}">
                            <a th:href="@{/product/toProductDetaild(id=${pro8.id})}" class="img_link"><img
                                    th:src="@{${pro8.main_image}}" width="130px"
                                    height="130px"/></a>
                            <div class="content">
                                <a th:href="@{/product/toProductDetaild(id=${pro8.id})}" class="title_name"
                                   th:text="${pro8.tetail}">有货潮牌Life After Life/男MA-1飞行夹克</a>
                                <h2><i>￥</i><b th:text="${pro8.price}">124.00</b></h2>
                            </div>
                            <a href="#" class="buy_btn"> 立即购买</a>
                        </li>

                        <!--                        <li class="recommend_info">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-2.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">烟花烫女装气质修身显瘦连衣裙套装</a>
                                                        <h2><i>￥</i>124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-3.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">SK-II 肌底晶透护肤礼盒（神仙水 补水保湿 精华液 乳液 套装）</a>
                                                        <h2><i>￥</i>124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-4.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">荣耀 6 Plus (PE-TL10) 3GB内存增强版 金色 移动联通双4G手机 双卡</a>
                                                        <h2><i>￥</i>1124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info ">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-5.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">荣耀 6 Plus (PE-TL10) 3GB内存增强版 金色 移动联通双4G手机 双卡</a>
                                                        <h2><i>￥</i>1124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info ">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-6.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">荣耀 6 Plus (PE-TL10) 3GB内存增强版 金色 移动联通双4G手机 双卡</a>
                                                        <h2><i>￥</i>1124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info ">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-7.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">荣耀 6 Plus (PE-TL10) 3GB内存增强版 金色 移动联通双4G手机 双卡</a>
                                                        <h2><i>￥</i>1124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>
                                                <li class="recommend_info">
                                                    <a href="#" class="img_link"><img th:src="@{/resources/Products/x-8.jpg}" width="130px"
                                                                                      height="130px"/></a>
                                                    <div class="content">
                                                        <a href="#" class="title_name">荣耀 6 Plus (PE-TL10) 3GB内存增强版 金色 移动联通双4G手机 双卡</a>
                                                        <h2><i>￥</i>1124.00</h2>
                                                    </div>
                                                    <a href="#" class="buy_btn"> 立即购买</a>
                                                </li>-->
                    </ul>
                </div>
            </div>
            <script>jQuery(".picScroll").slide({
                titCell: ".hd ul",
                mainCell: ".bd ul",
                autoPage: true,
                effect: "leftLoop",
                autoPlay: true,
                vis: 4
            });</script>
        </div>
    </div>
    <!--产品版块样式图层-->
    <div class="Product_area clearfix">
        <div class="area_title">
            <div class="name"><span class="floors">1F</span>男装女装</div>
        </div>
        <div class="list_style clearfix">
            <div class="Left_side">
                <ul>
                    <li th:each="pro4:${product4}">
                        <a th:href="@{/product/toProductDetaild(id=${pro4.id})}"><img th:src="@{${pro4.main_image}}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;"/>
                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                        </a>
                    </li>
                    <!--                    <li><a href="#"><img th:src="@{/resources/Products/AD-2.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>
                                        <li><a href="#"><img th:src="@{/resources/Products/AD-3.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>
                                        <li><a href="#"><img th:src="@{/resources/Products/AD-4.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>-->
                </ul>
            </div>
            <div class="middle">
                <!--广告-->
                <div class="hd">
                    <a class="prev" href="javascript:void(0)">&gt;</a>
                    <a class="next" href="javascript:void(0)">&lt;</a>
                </div>
                <div class="bd">
                    <ul>
                        <li th:each="pro2:${product2}"><a th:href="@{/product/toProductDetaild(id=${pro2.id})}"><img th:src="@{${pro2.main_image}}"/></a></li>
                        <!--<li><a href="#"><img th:src="@{/resources/Products/AD-6.jpg}"/></a></li>-->
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(".middle").slide({
                    titCell: ".hd ul",
                    mainCell: ".bd ul",
                    autoPlay: true,
                    autoPage: true,
                    interTime: 7000
                });
            </script>
            <div class="Left_side">
                <ul>
                    <li th:each="pro4s:${product4s}"><a th:href="@{/product/toProductDetaild(id=${pro4s.id})}"><img th:src="@{${pro4s.main_image}}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
<!--                    <li><a href="#"><img th:src="@{/resources/Products/AD-2.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-3.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-4.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>-->
                </ul>
            </div>
            <div class="advertising">
                <a th:each="pro2_left:${product2_left}" th:href="@{/product/toProductDetaild(id=${pro2_left.id})}" ><img th:src="@{${pro2_left.main_image}}" width="219" height="150"/></a>
                <!--<a href="#"><img th:src="@{/resources/Products/AD-8.jpg}" width="219" height="150"/></a>-->
                <a th:href="@{/product/toProductDetaild(id=${product1.id})}" class="da_AD"><img th:src="@{${product1.main_image}}" style="width: 318px;height: 150px;max-width: 100%;max-height: 100%;"/></a>
                <a th:each="pro2_right:${product2_right}" th:href="@{/product/toProductDetaild(id=${pro2_right.id})}"><img th:src="@{${pro2_right.main_image}}" width="219" height="150"/></a>
                <!--<a href="#"><img th:src="@{/resources/Products/AD-7.jpg}" width="219" height="150"/></a>-->
            </div>
            <!--品牌-->
            <div class="Brand_Gallery">
                <a ><img th:src="@{/resources/Brand/p-1.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-4.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-6.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-11.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-14.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-17.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-19.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-13.jpg}" width="120" height="32"/></a>
            </div>
        </div>
    </div>
    <!--产品版块样式图层-->
    <div class="Product_area clearfix">
        <div class="area_title">
            <div class="name"><span class="floors">2F</span>运动健康</div>
        </div>
        <div class="list_style clearfix">
            <div class="Left_side">
                <ul>
                    <li th:each="pro4:${RunProduct4}">
                        <a th:href="@{/product/toProductDetaild(id=${pro4.id})}"><img th:src="@{${pro4.main_image}}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;"/>
                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                        </a>
                    </li>
                    <!--                    <li><a href="#"><img th:src="@{/resources/Products/AD-2.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>
                                        <li><a href="#"><img th:src="@{/resources/Products/AD-3.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>
                                        <li><a href="#"><img th:src="@{/resources/Products/AD-4.jpg}"/>
                                            <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                                        </a></li>-->
                </ul>
            </div>
            <div class="middle">
                <!--广告-->
                <div class="hd">
                    <a class="prev" href="javascript:void(0)">&gt;</a>
                    <a class="next" href="javascript:void(0)">&lt;</a>
                </div>
                <div class="bd">
                    <ul>
                        <li th:each="pro2:${RunProduct2}"><a th:href="@{/product/toProductDetaild(id=${pro2.id})}"><img th:src="@{${pro2.main_image}}"/></a></li>
                        <!--<li><a href="#"><img th:src="@{/resources/Products/AD-6.jpg}"/></a></li>-->
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(".middle").slide({
                    titCell: ".hd ul",
                    mainCell: ".bd ul",
                    autoPlay: true,
                    autoPage: true,
                    interTime: 7000
                });
            </script>
            <div class="Left_side">
                <ul>
                    <li th:each="pro4s:${RunProduct4s}"><a th:href="@{/product/toProductDetaild(id=${pro4s.id})}"><img th:src="@{${pro4s.main_image}}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
<!--                    <li><a href="#"><img th:src="@{/resources/Products/AD-2.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-3.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-4.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>-->
                </ul>
            </div>
            <div class="advertising">
                <a th:each="pro2_left:${RunProduct2_left}" th:href="@{/product/toProductDetaild(id=${pro2_left.id})}" ><img th:src="@{${pro2_left.main_image}}" width="219" height="150"/></a>
                <!--<a href="#"><img th:src="@{/resources/Products/AD-8.jpg}" width="219" height="150"/></a>-->
                <a th:href="@{/product/toProductDetaild(id=${RunProduct1.id})}" class="da_AD"><img th:src="@{${RunProduct1.main_image}}" style="width: 318px;height: 150px;max-width: 100%;max-height: 100%;"/></a>
                <a th:each="pro2_right:${RunProduct2_right}" th:href="@{/product/toProductDetaild(id=${pro2_right.id})}"><img th:src="@{${pro2_right.main_image}}" width="219" height="150"/></a>
                <!--<a href="#"><img th:src="@{/resources/Products/AD-7.jpg}" width="219" height="150"/></a>-->
            </div>
            <!--品牌-->
            <div class="Brand_Gallery">
                <a ><img th:src="@{/resources/Brand/p-1.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-4.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-6.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-11.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-14.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-17.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-19.jpg}" width="120" height="32"/></a>
                <a ><img th:src="@{/resources/Brand/p-13.jpg}" width="120" height="32"/></a>
            </div>
        </div>
    </div>

    <!--产品版块样式图层-->
    <div class="Product_area clearfix">
        <div class="area_title">
            <div class="name"><span class="floors">2F</span>个人美妆</div>
        </div>
        <div class="list_style clearfix">
            <div class="Left_side">
                <ul>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-1.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-2.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-3.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-4.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                </ul>
            </div>
            <div class="middle">
                <!--广告-->
                <div class="hd">
                    <a class="prev" href="javascript:void(0)">&gt;</a>
                    <a class="next" href="javascript:void(0)">&lt;</a>
                </div>
                <div class="bd">
                    <ul>
                        <li><a href="#"><img th:src="@{/resources/Products/AD-5.jpg}"/></a></li>
                        <li><a href="#"><img th:src="@{/resources/Products/AD-6.jpg}"/></a></li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(".middle").slide({
                    titCell: ".hd ul",
                    mainCell: ".bd ul",
                    autoPlay: true,
                    autoPage: true,
                    interTime: 7000
                });
            </script>
            <div class="Left_side">
                <ul>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-15.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-16.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-17.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                    <li><a href="#"><img th:src="@{/resources/Products/AD-18.jpg}"/>
                        <div class="Layers"><img th:src="@{/resources/images/bg_img.png}"/></div>
                    </a></li>
                </ul>
            </div>
            <div class="advertising">
                <a href="#"><img th:src="@{/resources/Products/AD-11.jpg}" width="219" height="150"/></a>
                <a href="#"><img th:src="@{/resources/Products/AD-12.jpg}" width="219" height="150"/></a>
                <a href="#" class="da_AD"><img th:src="@{/resources/Products/AD-14.jpg}" width="318" height="150"/></a>
                <a href="#"><img th:src="@{/resources/Products/AD-13.jpg}" width="219" height="150"/></a>
                <a href="#"><img th:src="@{/resources/Products/AD-19.jpg}" width="219" height="150"/></a>
            </div>
            <!--品牌-->
            <div class="Brand_Gallery">
                <a href="#"><img th:src="@{/resources/Brand/p-1.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-4.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-6.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-11.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-14.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-17.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-19.jpg}" width="120" height="32"/></a>
                <a href="#"><img th:src="@{/resources/Brand/p-13.jpg}" width="120" height="32"/></a>
            </div>
        </div>
    </div>
</div>

<!--底部样式-->
<div class="ft_footer_service" id="footer">
    <div class="footerbox">
        <!--底部-->
        <div class="Menu_style ensure ">
            <div class="phone">
                400-123456
            </div>
            <div class="icon_en">
                <a href="#" class="icon_link"><img th:src="@{/resources/images/footer_icon_31.png}"/><span class="left"><h2>退换货</h2>7天无理由退换货</span></a>
                <a href="#" class="icon_link"><img th:src="@{/resources/images/footer_icon_33.png}"/><span class="left"><h2>正品保障</h2>企业认证产品</span></a>
                <a href="#" class="icon_link"><img th:src="@{/resources/images/footer_icon_35.png}"/><span class="left"><h2>满包邮</h2>满68元包邮</span></a>
                <a href="#" class="icon_link"><img th:src="@{/resources/images/footer_icon_37.png}"/><span class="left"><h2>直供产品</h2>厂家直销平台</span></a>
            </div>
        </div>
    </div>
</div>
<!--底部样式-->
<div class="footer">
    <div class="footerbox clearfix">
        <div class="clearfix">
            <div class="left help_link">
                <dl>
                    <dt>投保指南</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>保险服务</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
            </div>
            <!--信息内容-->

            <!--认证-->
            <!--认证展示样式-->
            <div class="Authenticate left clearfix" id="Authenticate_show">
                <div class="Authenticate_show">
                    <div class="picMarquee-left">
                        <div class="hd">
                            <a class="next">&lt;</a>
                            <a class="prev">&gt;</a>
                        </div>
                        <div class="bd">
                            <ul class="picList">
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic1.jpg}"/></a></div>
                                    <!--<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>-->
                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic2.jpg}"/></a></div>
                                    <!--<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>-->
                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic3.jpg}"/></a></div>

                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic4.jpg}"/></a></div>

                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic5.jpg}"/></a></div>

                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic6.jpg}"/></a></div>

                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic6.jpg}"/></a></div>

                                </li>
                                <li>
                                    <div class="pic"><a href="" target="_blank"><img
                                            th:src="@{/resources/images/pic6.jpg}"/></a></div>

                                </li>
                            </ul>
                        </div>
                    </div>

                    <script type="text/javascript">
                        jQuery(".picMarquee-left").slide({
                            mainCell: ".bd ul",
                            autoPlay: true,
                            effect: "leftMarquee",
                            vis: 2,
                            interTime: 50
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="text_link">
            <p>
                <a href="#">关于我们</a>｜ <a href="#">公开信息披露</a>｜ <a href="#">加入我们</a>｜ <a href="#">联系我们</a>｜ <a href="#">版权声明</a>｜
                <a href="#">隐私声明</a>｜ <a href="#">网站地图</a></p>
        </div>
    </div>
</div>
<!--右侧菜单栏购物车样式-->
<div class="fixedBox">
    <ul class="fixedBoxList">
        <li class="fixeBoxLi user"><a href="#"> <span class="fixeBoxSpan iconfont icon-my"></span>
            <strong>用户</strong></a></li>
        <li class="fixeBoxLi cart_bd" style="display:block;" id="cartboxs">
            <p class="good_cart">0</p>
            <span class="fixeBoxSpan iconfont icon-cart"></span> <strong>购物车</strong>
            <div class="cartBox">
                <div class="bjfff"></div>
                <div class="message">购物车内暂无商品，赶紧选购吧</div>
            </div>
        </li>
        <li class="fixeBoxLi Service "><span class="fixeBoxSpan iconfont icon-qq1"></span> <strong>客服</strong>
            <div class="ServiceBox">
                <div class="bjfffs"></div>
                <dl onclick="javascript:;">
                    <dt><img th:src="@{/resources/images/Service1.png}"></dt>
                    <dd><strong>QQ客服1</strong>
                        <p class="p1">9:00-22:00</p>
                        <p class="p2"><a
                                href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                        </p>
                    </dd>
                </dl>
                <dl onclick="javascript:;">
                    <dt><img th:src="@{/resources/images/Service1.png}"></dt>
                    <dd><strong>QQ客服1</strong>
                        <p class="p1">9:00-22:00</p>
                        <p class="p2"><a
                                href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                        </p>
                    </dd>
                </dl>
            </div>
        </li>
        <li class="fixeBoxLi code cart_bd " style="display:block;" id="cartboxss">
            <span class="fixeBoxSpan iconfont icon-weixin"></span> <strong>微信</strong>
            <div class="cartBox">
                <div class="bjfff"></div>
                <div class="QR_code">
                    <p><img th:src="@{/resources/images/erweim.jpg}" width="150px" height="150px"
                            style=" margin-top:10px;"/></p>
                    <p>微信扫一扫，关注我们</p>
                </div>
            </div>
        </li>

        <li class="fixeBoxLi Home"><a href="./"> <span class="fixeBoxSpan iconfont  icon-collect"></span>
            <strong>收藏</strong> </a></li>
        <li class="fixeBoxLi BackToTop"><span class="fixeBoxSpan iconfont icon-top"></span> <strong>返回顶部</strong></li>
    </ul>
</div>

</body>
</html>
